import React, { FC } from 'react';
import { PieChart } from 'bizcharts';

export type StatItem = {
  type: string;
  value: number;
}

interface Props {
  data: StatItem[];
}

// // 数据源
// const data = [
//   {
//     type: '计算机视觉',
//     value: 27,
//   },
//   {
//     type: 'NLP',
//     value: 25,
//   },
//   {
//     type: '语音',
//     value: 18,
//   },
//   {
//     type: '推荐',
//     value: 15,
//   },
//   {
//     type: '多模态',
//     value: 10,
//   },
// ];

const DatasetStat: FC<Props> = (props: Props) => {
  const { data } = props;

  return (
    <PieChart
      data={data}
      // title={{
      //   visible: true,
      //   text: '饼图-外部图形标签(outer label)',
      // }}
      // description={{
      //   visible: true,
      //   text: '当把饼图label的类型设置为outer时，标签在切片外部拉线显示。设置offset控制标签的偏移值。',
      // }}
      radius={0.8}
      angleField='value'
      colorField='type'
      label={{
        visible: true,
        type: 'outer',
        offset: 20,
      }}
    />
  );
}

export default DatasetStat;